<!-- 元素级别的权限控制 -->
<template>
  <div class="content">
    <Table height="430" border :columns="columns1" :data="datas"></Table>
    <Page
      :total="total"
      :page-size="pageSize"
      show-total
      @on-change="changepage"
      style="position: absolute;right: 10px; margin-top: 10px; margin-bottom:10px;"
    ></Page>
  </div>
</template>

<script>
import { mapGetters } from "vuex";
import figures from "../../components/figure";
export default {
  name: "element-permission",
  components: { figures },
  data() {
    return {
      index: 1,
      pageSize: 5, // 每页显示多少条
      total: 15,
      columns1: [
        {
          title: "姓名",
          key: "name",
          align: "center"
        },
        {
          title: "年龄",
          key: "age",
          align: "center"
        },
        {
          title: "性别",
          key: "gender",
          align: "center"
        },
        {
          title: "联系方式",
          key: "contact",
          align: "center"
        },
        {
          title: "身份证照片",
          key: "figurey",
          align: "center",
          render: (h, params) => {
            return h("div", [
              h(figures, {
                props: {
                  row: params.row
                },
                on: {}
              })
            ]);
          }
        },
        {
          title: "户籍所在地",
          key: "address",
          align: "center"
        },
        {
          title: "修改权限",
          key: "permissions",
          align: "center",
          render: (h, params) => {
            return h(
              "Select",
              {
                props: {
                  type: "primary",
                  size: "small",
                  placeholder: this.datas[params.index].permissions
                },
                style: {
                  marginRight: "5px"
                },
                on: {
                  "on-change": v => {
                    var i = v;
                    this.selectOptions(i);
                  }
                }
              },
              [
                h("Option", {
                  props: {
                    value: "1",
                    label: "普通管理员"
                  }
                }),
                h("Option", {
                  props: {
                    value: "2",
                    label: "超级管理员"
                  }
                })
              ]
            );
          }
        },
        {
          title: "操作",
          key: "action",
          align: "center",
          render: (h, params) => {
            return h("div", [
              h(
                "Button",
                {
                  props: {
                    type: "primary",
                    size: "small"
                  },
                  style: {
                    marginRight: "5px"
                  },
                  on: {
                    click: () => {
                      this.show(params.index);
                    }
                  }
                },
                "查看"
              ),
              h(
                "Button",
                {
                  props: {
                    type: "error",
                    size: "small"
                  },
                  on: {
                    click: () => {
                      this.remove(params.index);
                    }
                  }
                },
                "跳转"
              )
            ]);
          }
        }
      ],
      datas: []
    };
  },
  props: {},
  computed: {
    ...mapGetters(["permissions"])
  },
  methods: {
    changepage(index) {
      this.transition();
      this.index = index;
      var infortion = {
        num: index,
        roles: this.$store.getters.roles //传值给roles
      };
      this.$store
        .dispatch("Information", infortion)
        .then(data => {
          this.datas = data.datas;
        })
        .catch(err => {});
    },
    // 过度动画
    transition() {
      this.$Spin.show({
        render: h => {
          return h("div", [
            h("Icon", {
              class: "demo-spin-icon-load",
              props: {
                type: "ios-loading",
                size: 18
              }
            }),
            h("div", "正在加载中...")
          ]);
        }
      });
      setTimeout(() => {
        this.$Spin.hide();
      }, 500);
    },
    //添加删除
    show(index) {
      this.$Modal.info({
        title: "用户信息",
        content: `姓名：${this.datas[index].name}<br>年龄：${
          this.datas[index].age
        }<br>户籍所在地：${this.datas[index].address}`
      });
    },
    remove(index) {
      // this.datas.splice(index, 1);
      this.$router.push({ name: "particulars", params: { id: index } });
    },
    selectOptions(value) {
      this.$confirm("用户权限已被修改，是否确认提交", "确认信息", {
        distinguishCancelAndClose: true,
        confirmButtonText: "确认修改",
        cancelButtonText: "放弃修改",
        type: "warning",
        center: true
      })
        .then(() => {
          this.$message({
            type: "success",
            message: "用户权限修改成功！"
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "用户权限修改已取消！"
          });
        });
    }
  },
  watch: {},
  created() {
    this.transition();
  },
  mounted() {
    this.changepage(1);
  }
};
</script>

<style scoped>
.content {
  width: 100%;
  margin: 0 auto;
  position: relative;
}
.demo-spin-icon-load {
  animation: ani-demo-spin 0.5s linear infinite;
}
</style>